﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="../src/mixins/style/normalize.css" />
    <link rel="stylesheet" href="../src/lib/font-awesome/css/font-awesome.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css">
    <link rel="stylesheet" href="../src/mixins/style/base.css" />


    <link rel="stylesheet" href="http://kindeditor.net/ke4/themes/default/default.css" />
    <script charset="utf-8" src="http://kindeditor.net/ke4/kindeditor-min.js"></script>
    <script charset="utf-8" src="http://kindeditor.net/ke4/lang/zh-CN.js"></script>

    <!--引入Jquery-->
    <script src="../src/lib/jquery.js"></script>
    <!--引入Css-->
    <link href="../src/lib/webuploader/webuploader.css" rel="stylesheet" />
    <!--引入Js-->
    <script src="../src/lib/webuploader/webuploader.js"></script>

    <style>
        .container {
            width: 1100px;
        }
        
        .editor {
            width: 800px;
            height: 350px;
            display: inline-block;
        }
        
        .editor_wrap {
            width: 800px;
            height: 430px;
            float: left;
        }
        
        .img_wrap {
            width: 270px;
            float: right;
            margin-left: 4px;
        }
        
        .img_each {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
            border: 1px #e6ebf5 solid;
        }
        
        .img_each:hover {
            border: 1px orangered solid;
        }
        
        .img_each:last-child {
            margin-bottom: 0px;
        }
        
        .img_each img {
            width: 100%;
            height: calc(100% - 32px);
        }
        


        .img_each_bottom {
            line-height:32px;
            height:32px;
            padding:0px 10px;
        }
         .img_each_bottom a {
            color:lightseagreen;
        }

        .mask_noEdit {
            width: 100%;
            height: 100%;
            background-color: #eee;
            opacity: 0.6;
            position:absolute;
            top:0;
            left:0;
           line-height:430px;
           text-align:center;
           font-size:24px;
           vertical-align:middle;
           color:lightseagreen;
        }



    </style>

</head>

<body>



    <div class="container" id="app">


        <div class="mt_10">

            <el-button type="primary" v-on:click="saveOrUpdate">保存</el-button>
            <el-button type="warning" v-on:click="add">新增</el-button>

        </div>

        <div class="mt_10   clearfix">

            

            <m-card class="mt_10" :title='"第"+(index+1)+"个"' v-for="(item,index) in dataList" :key="item.Id">
                <a slot="header-right"  v-if="item.DataFlag==1" class="btn_text" v-on:click.stop="del(item)">移除</a>
                <a slot="header-right" v-if="item.DataFlag==0" class="btn_text" v-on:click.stop="toValid(item)">添加</a>
                <a slot="header-right" v-if="item.DataFlag==0" class="btn_text" v-on:click.stop="delDep(item)">彻底删除</a>
                <div class="clearfix inline-block-container">
                    <div class="editor_wrap clearfix">
                        <textarea :name="'editor_'+index" :id="'editor_'+index" class="editor" style="width:800px;height:410px;" v-model="item.Content">
                        </textarea>
                    </div>
                    <div class="img_wrap clearfix">
                        <div class="img_each">
                            <img :src="item.ImageUrlOne" alt="" v-on:click.stop="imgShow(item.ImageUrlOne)" />
                            <div class="img_each_bottom">
                                <div class="fl">
                                    <a href="#" v-on:click="inputImgUrl(index,1)">网络地址</a>
                                    <a href="#"  v-on:click="uploadImgUrl(index,1)">上传</a>
                                </div>

                                <div class="fr">
                                    <a href="#" v-on:click="clearImgUrl(index,1)">清空</a>
                                </div>
                            </div>
                        </div>
                        <div class="img_each">
                            <img :src="item.ImageUrlTwo" alt=""  v-on:click.stop="imgShow(item.ImageUrlTwo)" />
                            <div class="img_each_bottom">
                                <div class="fl">
                                    <a href="#" v-on:click="inputImgUrl(index,2)">网络地址</a>
                                    <a href="#" v-on:click="uploadImgUrl(index,2)">上传</a>
                                </div>
                                <div class="fr">
                                    <a href="#" v-on:click="clearImgUrl(index,2)">清空</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="line-height:30px;height:30px;" class="clearfix">
                    <el-switch v-model="item.ImageType"
                               active-text="大图"
                               inactive-text="小图">
                    </el-switch>
                </div>
                <div v-if="item.DataFlag!=1" class="mask_noEdit" style="">不可用状态</div>
            </m-card>

        </div>



    </div>


    <script src="../src/lib/jquery.js"></script>
    <script src="../src/lib/sea-all.js"></script>

    <script src="../src/lib/vue.js"></script>
    <script src="../src/lib/vue-router.js"></script>

    <script src="../boot.js"></script>
    <script src="../src/lib/lodash.js"></script>

    <!-- <link rel="stylesheet" href="../src/lib/elementui/index.css">
    <script src="../src/lib/elementui/index.js"></script> -->


    <script src="https://cdn.bootcss.com/element-ui/2.0.11/index.js"></script>



    <link rel="stylesheet" href="../src/lib/toastr/toastr.css" />
    <script src="../src/lib/toastr/toastr.min.js"></script>

    <script src="../src/mixins/global.mixins.js"></script>

    <script src="../src/lib/jquery.json.js"></script>

    <script>
        $(function() {
            seajs.use('./ArticleEdit.js');
        });
    </script>


</body>